<template>
  <div>
    <div id="loading_header">
      <div id="top">
        <div class="centerTOP">
          <div id="toplogo">
            <a href="#" target="_blank"><img :src="BASE_API + webconfig.logoimg" /></a>
          </div>
          <!-- toplogo结束 -->
          <!-- topad结束 -->

          <div class="quicklink">

            <!-- <a href="#" class="link_reg" target="_blank">帐号注册 </a> | -->
            <a :href="boxUrl" class="more" target="_blank">
              <img src="../../assets/static/images/09.png" />
            </a>
            <span id="more" target="_blank" class="btnmore more"><i class="icon_list"></i> 游戏直播间</span>
            <!-- <a href="#" class="link_recharge" target="_blank"> 充值 </a> -->
          </div>
        </div>
      </div>
      <!-- top结束 -->
      <div id="GameList">
        <!-- <div class="center">
          <ul>
            <li>
              <a href="https://www.93hy.com/" class="photo" target="_blank"> <img
                  src="../../assets/static/images/top/01.png" alt="图片描述" /></a>
              <strong>版本名称</strong>
            </li>
            <li>
              <a href="https://www.93hy.com/" class="photo" target="_blank"> <img
                  src="../../assets/static/images/top/02.png" alt="图片描述" /></a>
              <strong>版本名称</strong>
            </li>
            <li>
              <a href="https://www.93hy.com/" class="photo" target="_blank"> <img
                  src="../../assets/static/images/top/03.png" alt="图片描述" /></a>
              <strong>版本名称</strong>
            </li>

          </ul>
          <span class="clear"></span>
          <div class="myHistory">
            玖尚互娱推荐： <a href="https://www.93hy.com/" target="_blank">版本名称 </a> <a href="https://www.93hy.com/"
              target="_blank">版本名称 </a> <a href="https://www.93hy.com/" target="_blank">版本名称 </a>
          </div>
          <div class="morelink">
     
            <a v-for="item, index in gameContactList" :href="item.skipUrl" target="_blank"><i class="icon_kefu"></i>{{
              item.names }}</a>

          </div>
        </div> -->
        <div class="livebox center">
          <div v-if="LiveList.length <= 0" style="text-align:center;">暂无直播</div>
          <ul v-else>
            <li v-for="item in  LiveList " v-if="item.sortNum != 0">
              <div class="liveimg">
                <img :src="BASE_API + item.liveImg">
                <div class="livebut">
                  <a :href=item.liveUrl target="_blank">进入直播间</a>
                </div>
              </div>
              <div class="livefoot">
                <h2>{{ item.liveTitle }}</h2>
                <div class="infor_text">
                  <img src="../../assets/static/images/18.png" class="fl">
                  <span class="fl">{{ item.gameName }}</span>
                  <span class="fr">{{ item.hotNum }}万</span>
                  <img src="../../assets/static/images/17.png" style="width: 12px;    margin-top: 5px;" class="fr">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- GameList结束 -->
    </div>

    <div id="BigBanner">
      <div class="banner">
        <div class="focus-box" id="focus-box">
          <ul>
            <li style="display: list-item;" v-for="item, index in bannerList"><a :href="item.skipUrl" target="_blank"><img
                  :src="BASE_API + item.imgUrl" /></a>
            </li>
          </ul>
          <div class="focus-btn" id="focus-btn">
            <a href="javascript:;" v-for="item, index in bannerList" :class="index == 0 ? 'act' : ''">{{ item.ID }}</a>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- BigBanner结束 -->

    <section id="Live">
      <div class="center">
        <div id="m1">

        </div>
        <!-- m1结束 -->
        <section id="gameList1">
          <div class="center">
            <div class="games" v-for="item, index in list">
              <a :href="item.skipUrl" target="_blank" class="photo">
                <img :src="BASE_API + item.imgUrl" alt="description " class="_pic" />
              </a>
              <h4>
                <em>{{ item.versionName }}</em>
                <a :href="item.skipUrl" target="_blank">{{ item.gameName }}</a>
              </h4>
              <p>{{ item.brief }}</p>
              <a :href="item.skipUrl" class="_btn_go" target="_blank">进入官网 </a>
              <span class="_line"></span>'
            </div>




          </div>
        </section>
      </div>
    </section>
    <!-- Live结束 -->


    <footer id="footer">
      <div class="center">
        <div style="margin-right: 43px;">
          <img src="../../assets/static/images/footerbg.png" />
        </div>
        <div style="    line-height: 20px;" v-html="webconfig.mzsm"></div>
      </div>

    </footer>
    <!-- footer结束 -->
    <div :class="rightbar ? 'rightbar' : 'rightbar close'" id="kf">

      <a href="javascript:;" @click="doAct" class="btn-close"></a>

      <h6>玖尚互娱<span>扫扫添加关注我们游戏动态</span></h6>
      <div class="code">

        <a target="_blank">
          <img :src="BASE_API + webconfig.qrcode" width="151" height="155" border="0">
        </a>
      </div>

      <a v-for="item, index in gameContactList" :href="item.skipUrl" target="_blank" class="kefu">{{ item.names }}</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      LiveList: '',
      boxUrl: '',
      bannerList: '',
      gameContactList: '',
      webconfig: '',
      rightbar: true,
      list: '',
      BASE_API: process.env.BASE_API + '/'
    }
  },

  computed: {},
  mounted() {
    this.$apis.gameLiveList({
      page: 1,
      pageSize: 999
    }).then(res => {
      this.LiveList = res.data.data.list
    })
    this.$apis.getConfig().then(res => {
      this.bannerList = res.data.data.bannerList
      this.gameContactList = res.data.data.gameContactList
      this.webconfig = res.data.data.webconfig;
      this.gameContactList.map(item => {
        if (item.names == "盒子下载") {
          this.boxUrl = item.skipUrl
        }
      })
      $(function () {
        function banFocus(obj, obtn) {
          var timer = null
          var len = $(obj).find('li').length, index = 0;
          function show(index) {
            $(obtn).eq(index).addClass('act').siblings().removeClass('act')
            $(obj).find('li').eq(index).fadeIn(900).siblings().fadeOut(400);
          }
          $(obtn).mouseenter(function (e) {
            var index = $(this).index();
            show(index);
          }).eq(0).trigger('mouseenter')

          $(obj).hover(function () {
            clearInterval(timer);
          }, function () {
            timer = setInterval(function () {
              index++;
              if (index == len) { index = 0 }
              show(index);
            }, 4500)
          }).trigger('mouseleave');
        }

        banFocus('#focus-box', '#focus-btn a');
      })
    })
    this.$apis.getGameListList({ page: 1 }).then(res => {
      this.list = res.data.data.list
      $(function () {
        $(".games").each(function (index, item) {

          $(item).hover(function () {
            $(".games").eq(index).addClass('hover_games').siblings().removeClass('hover_games')
            $(".games").eq(index).find("._line").stop().animate({
              width: "100%",
              height: "5px",
              opacity: 1
            }, 500)

          }, function () {
            $(".games").removeClass('hover_games')
            $(".games").eq(index).find("._line").stop().animate({
              width: "0%",
              height: "0px",
              opacity: 0
            }, 500)
          })
        })



      })
    })

    $(function () {
      $("#more").hover(function () {
        $("#GameList").css({
          display: "block",
        }).animate({
          width: "100%",
          minHeight: "250px",
          opacity: 1
        }, 500)
      }, function () {

      })
      $("#GameList").hover(() => { }, () => {
        $("#GameList").animate({
          width: "100%",
          minHeight: "0px",
        }, 500)
      })
    })

  },

  methods: {
    // bb(e) { 
    //   console.log(e)
    // },
    doAct() {
      this.rightbar ? this.rightbar = false : this.rightbar = true
    },
  }
}
</script>

<style lang="less" scoped>
.centerTOP {
  width: 1280px;
  overflow: hidden;
  margin: auto;
}

.livebox {
  min-height: calc(100vh - 180px);
  box-sizing: border-box;

  overflow: hidden;
  margin-top: 80px;
}

.livebox ul {
  overflow: hidden;
  width: 100%;
}

.livebox ul li {
  overflow: hidden;
  float: left;
  width: 296px;

  background: #414141;
  border-radius: 5px;
  margin-right: 30px;
  margin-bottom: 30px;

}

.liveimg {
  width: 100%;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.liveimg img {
  width: 100%;
  height: 100%;
}

.liveimg:hover .livebut {
  display: block;
}

.livebut {
  width: 100%;
  height: 100%;
  background: #242424c2;
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;

}

.livebut a {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 130px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  color: #f1af4a;
  border: 2px solid #f1af4a;
  border-radius: 50px;
  margin: auto;
  cursor: pointer;
  text-decoration: none
}

.livefoot {
  padding: 10px;
  color: #d5d5d5;
  font-size: 12px;
}

.livefoot h2 {
  font-size: 14px;
  margin-bottom: 5px;
}

.livefoot .infor_text {
  overflow: hidden;
}

.livefoot .infor_text span,
.livefoot .infor_text a {
  margin: 5px 10px;
}
</style>



